.fa-loading-page {
	background-color: var(--wot-bg-color);
	bottom: 0;
	left: 0;
	margin: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity var(--wot-transition-duration);
	z-index: 2002;
	@keyframes loading {
		0% {
			background-position:
				0 0,
				0 100%,
				100% 100%;
		}
		25% {
			background-position:
				100% 0,
				0 100%,
				100% 100%;
		}
		50% {
			background-position:
				100% 0,
				0 0,
				100% 100%;
		}
		75% {
			background-position:
				100% 0,
				0 0,
				0 100%;
		}
		100% {
			background-position:
				100% 100%,
				0 0,
				0 100%;
		}
	}
	.fa-loading-page__box {
		display: flex;
		flex-direction: column;
		gap: 5px;
		align-items: center;
		position: absolute;
		text-align: center;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		.box-icon {
			width: 40px;
			aspect-ratio: 1;
			--g1: conic-gradient(from 90deg at 2px 2px, #0000 90deg, var(--wot-color-primary) 0);
			--g2: conic-gradient(from -90deg at 16px 16px, #0000 90deg, var(--wot-color-primary) 0);
			background: var(--g1), var(--g1), var(--g1), var(--g2), var(--g2), var(--g2);
			background-size: 18px 18px;
			background-repeat: no-repeat;
			animation: loading 1.2s infinite;
		}
		.box-text {
			color: var(--wot-color-primary);
			font-size: var(--wot-font-size-base);
			margin: 3px 0;
		}
	}
}
